import React from 'react'

class App extends React.Component {
  render() {
    const boss = '大石头'
    return (
        <div>
          <h2>宇宙人生 {boss}</h2>
          <Lit name={ boss } />
        </div>
    )
  }
}

class Lit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      solders: ['胡子', '制作', '味道']
    }

    console.log('初始化')
  }

  componentWillMount() {
    console.log('即将挂载')
  }
  componentWillUpdate() {
    console.log('即将更新')
  }
  componentDidUpdate() {
    console.log('更新完毕')
  }

  addSolder() {
    this.setState({
      solders: [...this.state.solders, '新的人' + (Math.random() * 10 >> 0)]
    })
  }

  render() {
    return (
        <div>
          <h4>准备好了， { this.props.name }</h4>
          <button type="button" onClick={ this.addSolder.bind(this) }>once</button>
          <ul>
            {this.state.solders.map((v, i) => {
              return <li key={ i }>{ v }</li>
            })}
          </ul>
        </div>
    )
  }

}

export default App